<template>
    <div>
       <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-row :gutter="20"> 
                <el-col :span="6">
                     <el-input
                        placeholder="请输入内容" v-model="queryinfo.query" clearable @clear="getuserlist">
                        <el-button slot="append" icon="el-icon-search" @click="getuserlist"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
                </el-col>
            </el-row>

            <el-table :data="userlist" border stripe>
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="姓名" prop="username"></el-table-column>
                <el-table-column label="邮箱" prop="email"></el-table-column>
                <el-table-column label="电话" prop="mobile"></el-table-column>
                <el-table-column label="角色" prop="role_name"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope='scope'>    
                        <el-switch v-model="scope.row.mg_state" @change="userchange(scope.row)"></el-switch>
                    </template>    

                </el-table-column>
                <el-table-column label="操作" width="180px">
                    <template slot-scope="scope">    
                        <el-button type="primary" @click="showEditDialog(scope.row.id)" icon="el-icon-edit" size="mini"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
                        <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>
                    </template>    
                </el-table-column>
            </el-table>

             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="queryinfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryinfo.pagesize"
                layout="sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
        </el-card>


        <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        width="50%" @close="adddialogclose">
       <el-form :model="addForm" :rules="addFormrules" ref="addFormref" 
       label-width="100px" >
             <el-form-item label="用户名" prop="username">
                <el-input v-model="addForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="addForm.password"></el-input>
            </el-form-item>
             <el-form-item label="邮箱" prop="email">
                <el-input v-model="addForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="addForm.mobile"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser">确 定</el-button>
        </span>
        </el-dialog>


        <el-dialog
        title="修改用户"
        :visible.sync="editDialogVisible"
        width="50%" @close="editDialogClose">
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
            <el-form-item label="用户明">
                <el-input v-model="editForm.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="editForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="editForm.mobile"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUserInfo">确 定</el-button>
        </span>
        </el-dialog>


    </div>
</template>

<script>
export default {
    data(){
        var checkemail = (rule,value,cb) => {
            const regemail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
            if(regemail.test(value)){
                return cb()
            }
            cb(new Error('请输入合法的邮箱'))
        }

        var checkmobile = (rule,value,cb) => {
            const regemail = 
            /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]14[57])[0-9]{8}$/
            if(regemail.test(value)){
                return cb()
            }
            cb(new Error('请输入合法的手机号'))
        }
 
        return{
            queryinfo:{
                query:'',
                pagenum:1,
                pagesize:2
            },
            userlist:[],
            total:0,
            dialogVisible:false,
            editDialogVisible:false,
            editForm:{
                username:'',
                email:'',
                mobile:''
            },
            editFormRules:{
                email:[
                    { require:true,message:'请输入邮箱',trigger:'blur' },
                    {validator:checkemail,trigger:'blur'}
                ],
                mobile:[
                    { require:true,message:'请输入手机',trigger:'blur' },
                    {validator:checkmobile,trigger:'blur'}
                ]
            },
            addForm:{
                username:'',
                password:'',
                email:'',
                mobile:''
            },
            addFormrules:{
                username:[
                    {require:true,message:'请输入用户明',trigger:'blur'},
                    {min:3,max:10,message:'用户名长度在3到10位之间',trigger:'blur'}
                ],
                password:[
                    {require:true,message:'请输入密码',trigger:'blur'},
                    {min:3,max:12,message:'密码长度在3到12位之间',trigger:'blur'}
                ],
                email:[
                    {require:true,message:'请输入邮箱',trigger:'blur'},
                    {validator:checkemail,trigger:'blur'}
                   
                ],
                mobile:[
                      {require:true,message:'请输入手机',trigger:'blur'},
                      {validator:checkmobile,trigger:'blur'}
                ]
            }
        }
    },
    created(){
        this.getuserlist()
    },
    methods:{
     async   getuserlist(){
          const {data : res }  = await  this.$axios.get('users',{params:this.queryinfo});
           if(res.meta.status !== 200) return this.$message.error('获取用户数据失败') 
            this.userlist = res.data.users
            this.total = res.data.total
        },
        handleSizeChange(newsize){
            this.queryinfo.pagesize = newsize
            this.getuserlist()
        },
        handleCurrentChange(newpage){
            this.queryinfo.pagenum = newpage
            this.getuserlist()
        },
        async userchange(userinfo){
             const {data:res} = await this.$axios.put(`users/${userinfo.id}/state/
             ${userinfo.mg_state}`)
            if(res.meta.status !== 200){
                userinfo.mg_state = !userinfo.mg_state
                return this.$message.error('更新用户状态失败');
            } 
             this.$message.success("更新用户成功")
        },
        adddialogclose(){
            this.$refs.addFormref.resetFields()
        },
        addUser(){
            this.$refs.addFormref.validate(async valid => {
                if(!valid) return;
              const {data : res} = await this.$axios.post('users',this.addForm)
                if(res.meta.status != 201) return this.$message.error('添加用户失败')
                this.$message.success('添加用户成功')
                this.dialogVisible = false
                this.getuserlist()
            })
        },
        async showEditDialog(id){
            
            const {data:res} = await this.$axios.get('users/'+id)
            if(res.meta.status != 200)
            return this.$error('查询用户信息失败')

            this.editForm = res.data
            this.editDialogVisible = true
        },
        editDialogClose(){
            this.$$refs.editFormRef.resetFields();
        },
        editUserInfo(){
            this.$refs.editFormRef.validate(async valid => {
                if(!valid) return 
                const {data:res} = await this.$axios.put('users/'+this.editForm.id,{
                    email:this.editForm.email,
                    mobile:this.editForm.mobile
                })
                if(res.meta.status !== 200){
                    this.$message.error('更新失败');
                }

                this.editDialogVisible = false
                this.getuserlist()
                this.$message.success('更新成功');
            })
        },
        async removeUserById(id){
            const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => {
                return err
            })

            console.log(confirmResult)
            if(confirmResult !== 'confirm')
            return this.$message.info('已取消删除')


           const { data:res } = await this.$axios.delete('users/'+id)
           if(res.meta.status !== 200)
            return this.$message.error('删除用户失败')

            this.$message.success('删除用户成功')
            this.getuserlist()
        }
    }

}
</script>

<style lang="less" scoped>

</style>